<template>
    <el-container>
        <el-aside width="2rem"><img :src="noticeIcon" alt=""></el-aside>
        <el-main> 
            <van-swipe vertical :autoplay="5000" v-if="notice.length>0" :show-indicators="false">
                <van-swipe-item v-for="(n,item) in notice" :key="item" style="height: auto">
                    <a>{{n.content}}</a>
                </van-swipe-item>
            </van-swipe>
        </el-main>
    </el-container>
</template>

<script>


    import noticeIcon from "../../assets/img/icon_notice.png"
    export default {
        name: "Notice",
        data(){
            return {
                noticeIcon:noticeIcon,
                notice:[]
            }
        },
        mounted() {
            this.$api.live.ShowTips(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                this.notice = res.data.data
            })
        }
    }
</script>

<style scoped>
    .el-container{
        background: #fff;
        margin: 0 auto 0.5rem auto;
        padding:5px 0 5px 10px;
		align-items: center;
    }
    .el-aside {
        color: #333;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
    }
    .el-aside img{
        width: 1rem;
    }

    .el-main {
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: flex-start;*/
        color: #333;
        text-align: left;
        /*line-height: 1rem;*/
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        padding: 0px 30px 0px 0;
        position: relative;
        /* height: 1.6rem; */
    }
    .el-main span{
        position: absolute;
        right: -2rem;
        font-size: 12px;
        color: #999;
        font-weight: normal;
        top: 0.5rem;



    }

    .el-main .van-swipe-item a{
        /*text-overflow: -o-ellipsis-lastline;*/
       /* overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; */


    }
    .el-main .van-swipe-item{
        /*height: 2.3rem!important;*/
        display: flex;
        align-items: center;
    }
    .el-main .van-swipe{
        overflow: initial;
    }


    .el-main ul{
        padding:0;
        margin: 0;
        position: relative;
        transition: top 1s linear;
        width: 100%;

    }
    .el-main ul li{
        /*display: flex;*/
        justify-content: flex-start;
        align-items: center;
        list-style: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        position: relative;

    }
</style>